import React from 'react'
import {HashRouter,Route,Link,Switch} from 'react-router-dom'
import Main from './main'
import About from './about'
import Topics from './topics'

export default class Home extends React.Component{
    render(){
        return(
            <HashRouter>
                <div>
                    <ul>
                        <li><Link to="/">Home</Link></li>
                        <li><Link to="/about">About</Link></li>
                        <li><Link to="/topics">Topics</Link></li>
                    </ul>
                    <hr/>
                    {/* 精确匹配 exact  否则会模糊匹配如：路径为/或者/about都会被匹配出来
                     ,switch会匹配到第一个符合的就不再向下匹配了*/}
                    <Switch>
                        <Route exact={true} path="/" component={Main}></Route>
                        <Route path="/about" component={About}></Route>
                        <Route path="/topics" component={Topics}></Route>
                    </Switch>
                </div>
            </HashRouter>
        );
    }
}